﻿<!DOCTYPE html>
<html>
  <head>
    <title>锚点导航 Anchor</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/锚点导航_anchor/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/锚点导航_anchor/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u11824" class="ax_default" data-label="背景">
        <div id="u11824_state0" class="panel_state" data-label="State1" style="">
          <div id="u11824_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u11825" class="ax_default" data-label="线条">
        <div id="u11825_state0" class="panel_state" data-label="State1" style="">
          <div id="u11825_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11826" class="ax_default _默认样式">
        <div id="u11826_div" class=""></div>
        <div id="u11826_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11827" class="ax_default _默认样式">
        <div id="u11827_div" class=""></div>
        <div id="u11827_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u11829" class="ax_default _默认样式">
        <img id="u11829_img" class="img " src="images/___icons/u605.png"/>
        <div id="u11829_text" class="text ">
          <p><span>Copyright © </span><a id="u11830" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11831" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="110">

        <!-- Unnamed (Rectangle) -->
        <div id="u11832" class="ax_default _默认样式">
          <div id="u11832_div" class=""></div>
          <div id="u11832_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">锚点用于跳转到页面指定位置，需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。在Axure中实现锚点跳转时，需要在跳转区域中对锚点区域元件进行命名，然后在对应元件上添加点击事件中的“滚动到元件&lt;锚链接&gt;”实现跳转。本页提供了一个完整的锚点跳转交互示例作为参考，其中涉及到移动事件，窗口事件、条件判断等方法的使用。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11833" class="ax_default _默认样式">
          <div id="u11833_div" class=""></div>
          <div id="u11833_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11834" class="ax_default" data-left="20" data-top="230" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11835" class="ax_default _默认样式">
          <div id="u11835_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11836" class="ax_default _默认样式">
          <img id="u11836_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11836_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 锚点工具栏 (Dynamic Panel) -->
      <div id="u11837" class="ax_default" data-label="锚点工具栏">
        <div id="u11837_state0" class="panel_state" data-label="State1" style="">
          <div id="u11837_state0_content" class="panel_state_content">

            <!-- 天猫超市 (Rectangle) -->
            <div id="u11838" class="ax_default _默认样式 selected" data-label="天猫超市" selectiongroup="锚点工具栏">
              <div id="u11838_div" class="selected"></div>
              <div id="u11838_text" class="text ">
                <p><span>天猫超市</span></p>
              </div>
            </div>

            <!-- 天猫国际 (Rectangle) -->
            <div id="u11839" class="ax_default _默认样式" data-label="天猫国际" selectiongroup="锚点工具栏">
              <div id="u11839_div" class=""></div>
              <div id="u11839_text" class="text ">
                <p><span>天猫国际</span></p>
              </div>
            </div>

            <!-- 美丽人生 (Rectangle) -->
            <div id="u11840" class="ax_default _默认样式" data-label="美丽人生" selectiongroup="锚点工具栏">
              <div id="u11840_div" class=""></div>
              <div id="u11840_text" class="text ">
                <p><span>美丽人生</span></p>
              </div>
            </div>

            <!-- 潮电酷玩 (Rectangle) -->
            <div id="u11841" class="ax_default _默认样式" data-label="潮电酷玩" selectiongroup="锚点工具栏">
              <div id="u11841_div" class=""></div>
              <div id="u11841_text" class="text ">
                <p><span>潮电酷玩</span></p>
              </div>
            </div>

            <!-- 居家生活 (Rectangle) -->
            <div id="u11842" class="ax_default _默认样式" data-label="居家生活" selectiongroup="锚点工具栏">
              <div id="u11842_div" class=""></div>
              <div id="u11842_text" class="text ">
                <p><span>居家生活</span></p>
              </div>
            </div>

            <!-- 打造爱巢 (Rectangle) -->
            <div id="u11843" class="ax_default _默认样式" data-label="打造爱巢" selectiongroup="锚点工具栏">
              <div id="u11843_div" class=""></div>
              <div id="u11843_text" class="text ">
                <p><span>打造爱巢</span></p>
              </div>
            </div>

            <!-- 户外出行 (Rectangle) -->
            <div id="u11844" class="ax_default _默认样式" data-label="户外出行" selectiongroup="锚点工具栏">
              <div id="u11844_div" class=""></div>
              <div id="u11844_text" class="text ">
                <p><span>户外出行</span></p>
              </div>
            </div>

            <!-- Unnamed (Vertical Line) -->
            <div id="u11845" class="ax_default line">
              <img id="u11845_img" class="img " src="images/锚点导航_anchor/u11845.png"/>
            </div>

            <!-- 圆点 (Ellipse) -->
            <div id="u11846" class="ax_default _默认样式" data-label="圆点">
              <img id="u11846_img" class="img " src="images/锚点导航_anchor/圆点_u11846.png"/>
            </div>

            <!-- 猜你喜欢 (Rectangle) -->
            <div id="u11847" class="ax_default _默认样式" data-label="猜你喜欢" selectiongroup="锚点工具栏">
              <div id="u11847_div" class=""></div>
              <div id="u11847_text" class="text ">
                <p><span>猜你喜欢</span></p>
              </div>
            </div>

            <!-- 识别区域 (Dynamic Panel) -->
            <div id="u11848" class="ax_default" data-label="识别区域">
              <div id="u11848_state0" class="panel_state" data-label="State1" style="">
                <div id="u11848_state0_content" class="panel_state_content">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 天猫超市 (Rectangle) -->
      <div id="u11849" class="ax_default _默认样式" data-label="天猫超市">
        <div id="u11849_div" class=""></div>
        <div id="u11849_text" class="text ">
          <p><span>天猫超市</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11850" class="ax_default" data-left="20" data-top="650" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11851" class="ax_default _默认样式">
          <div id="u11851_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11852" class="ax_default _默认样式">
          <img id="u11852_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11852_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 天猫国际 (Rectangle) -->
      <div id="u11853" class="ax_default _默认样式" data-label="天猫国际">
        <div id="u11853_div" class=""></div>
        <div id="u11853_text" class="text ">
          <p><span>天猫国际</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11854" class="ax_default" data-left="20" data-top="1070" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11855" class="ax_default _默认样式">
          <div id="u11855_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11856" class="ax_default _默认样式">
          <img id="u11856_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11856_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 美丽人生 (Rectangle) -->
      <div id="u11857" class="ax_default _默认样式" data-label="美丽人生">
        <div id="u11857_div" class=""></div>
        <div id="u11857_text" class="text ">
          <p><span>美丽人生</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11858" class="ax_default" data-left="20" data-top="1490" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11859" class="ax_default _默认样式">
          <div id="u11859_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11860" class="ax_default _默认样式">
          <img id="u11860_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11860_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 潮电酷玩 (Rectangle) -->
      <div id="u11861" class="ax_default _默认样式" data-label="潮电酷玩">
        <div id="u11861_div" class=""></div>
        <div id="u11861_text" class="text ">
          <p><span>潮电酷玩</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11862" class="ax_default" data-left="20" data-top="1910" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11863" class="ax_default _默认样式">
          <div id="u11863_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11864" class="ax_default _默认样式">
          <img id="u11864_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11864_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 居家生活 (Rectangle) -->
      <div id="u11865" class="ax_default _默认样式" data-label="居家生活">
        <div id="u11865_div" class=""></div>
        <div id="u11865_text" class="text ">
          <p><span>居家生活</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11866" class="ax_default" data-left="20" data-top="2330" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11867" class="ax_default _默认样式">
          <div id="u11867_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11868" class="ax_default _默认样式">
          <img id="u11868_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11868_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 打造爱巢 (Rectangle) -->
      <div id="u11869" class="ax_default _默认样式" data-label="打造爱巢">
        <div id="u11869_div" class=""></div>
        <div id="u11869_text" class="text ">
          <p><span>打造爱巢</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11870" class="ax_default" data-left="20" data-top="2750" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11871" class="ax_default _默认样式">
          <div id="u11871_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11872" class="ax_default _默认样式">
          <img id="u11872_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11872_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 户外出行 (Rectangle) -->
      <div id="u11873" class="ax_default _默认样式" data-label="户外出行">
        <div id="u11873_div" class=""></div>
        <div id="u11873_text" class="text ">
          <p><span>户外出行</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11874" class="ax_default" data-left="20" data-top="3170" data-width="1100" data-height="400">

        <!-- Unnamed (Rectangle) -->
        <div id="u11875" class="ax_default _默认样式">
          <div id="u11875_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11876" class="ax_default _默认样式">
          <img id="u11876_img" class="img " src="images/锚点导航_anchor/u11836.png"/>
          <div id="u11876_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- 猜你喜欢 (Rectangle) -->
      <div id="u11877" class="ax_default _默认样式" data-label="猜你喜欢">
        <div id="u11877_div" class=""></div>
        <div id="u11877_text" class="text ">
          <p><span>猜你喜欢</span></p>
        </div>
      </div>

      <!-- 热区占位 (Hot Spot) -->
      <div id="u11878" class="ax_default" data-label="热区占位">
      </div>
    </div>
  </body>
</html>
